<template>
  <el-dialog :visible.sync="registerFlag" :width="isMobile">
    <div class="register">
      <div class="cLeft">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
      </div>
      <el-form
        ref="FormRef"
        :model="Form"
        :rules="FormRules"
        class="form"
        label-width="80px"
        label-position="right"
      >
        <!--        昵称-->
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="Form.nickname"></el-input>
        </el-form-item>
        <!--        用户名-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="Form.username"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="Form.password"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="Form.email"></el-input>
        </el-form-item>
        <!--        头像-->
        <el-form-item prop="avatar" label="头像">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            :limit="1"
            action="http://127.0.0.1:3000/upload"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
          >
            <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!-- <el-button @click="resetForm">取消</el-button> -->
        <div class="btn">
          <el-button type="primary" @click="userRegister" class="registerbtn"
            >注册</el-button
          >
          <span>已有账号？<a href="#" @click="toLogin">立即登录</a></span>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { regUser } from "@/request/api.js";
export default {
  name: "",
  components: {},
  props: [""],
  computed: {
    registerFlag: {
      set(value) {
        this.$store.state.registerFlag = value;
      },
      get() {
        return this.$store.state.registerFlag;
      },
    },
    isMobile() {
      const clientWidth = document.documentElement.clientWidth;
      if (clientWidth > 960) {
        return "40%";
      }
      return "92%";
    },
  },
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        avatar: "",
        email: "",
        password: "",
      },
      // 表单数据绑定对象
      Form: {
        nickname: "",
        username: "",
        password: "",
        email: "",
      },
      // 表单验证规则对象
      FormRules: {
        // 验证用户是否合法
        username: [
          // 必填，提示消息，鼠标焦点消失时触发
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2-10个字符之间" },
        ],
        // 验证用户是否合法
        nickname: [
          // 必填，提示消息，鼠标焦点消失时触发
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2-10个字符之间" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
        // email: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: checkEmail,
        //   },
        // ],
      },
      dialogImageUrl: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    toLogin() {
      this.$store.state.registerFlag = false;
      this.$store.state.loginFlag = true;
    },
    async handleSuccess(res) {
      this.dialogImageUrl = res.url;
    },
    handleRemove() {
      this.dialogImageUrl = "";
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },

    userRegister() {
      this.$refs.FormRef.validate(async (valid) => {
        if (!valid) return;
        this.user.username = this.Form.username;
        this.user.nickname = this.Form.nickname;
        this.user.email = this.Form.email;
        this.user.avatar = this.dialogImageUrl;
        this.user.password = this.Form.password;
        console.log(this.user);
        const { data: res } = await regUser(this.user);
        console.log(res);
        if (res.status !== 200) return this.$message.error("注册失败");
        this.$refs.FormRef.resetFields();
        this.$message({
          message: "注册成功,返回登录",
          type: "success",
          offset: 80,
        });
        this.toLogin();
      });
      // checkEmail = (rule, value, callback) => {
      //   const regEmail =
      //     '/^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/';
      //   if (regEmail.test(value)) {
      //     return callback();
      //   }
      // };
    },
  },
};
</script>
<style lang='less' scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-size: cover;
}
.register {
  border: 8px solid #eeeeee;
  width: 700px;
  height: 500px;
  background-color: white;
  margin: auto;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.cLeft {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-right: 50px;
  border-right: #8c939d 1px solid;
}
#p1 {
  color: #ffd026;
  font-size: 20px;
}
#p2 {
  color: #a6a6a6;
  font-size: 20px;
}
.el-form-item {
  width: 60%;
}
.el-input /deep/ .el-input__inner {
  width: 260px;
  height: 32px;
  border: 1px solid #40cee5;
  /*    设置边框圆角*/
  border-radius: 10px;
  padding-left: 10px;
}
// .el-input {
//   width: 251px;
//   height: 32px;
//   border: 1px solid #a6a6a6;
//   /*    设置边框圆角*/
//   border-radius: 10px;
//   padding-left: 10px;
// }
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  border: 1px dashed #40cee5;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.registerbtn {
  width: 100px;
  background-color: #ffd026;
}
.btn {
  position: relative;
  left: 70%;
  transform: translate(-50%);
}
span {
  margin-left: 15px;
  text-align: center;
  line-height: 88px;
  font-size: 14px;
  a {
    text-decoration-line: none;
    color: #abc1ee;
  }
}
@media only screen and (max-width: 992px) {
  .cLeft {
    display: none;
  }
}
</style>